<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <h2>{{num1}}</h2>
    <h1>{{count}}</h1> -->
    <h1>{{num}}</h1>
    <p v-for="item in arr" :key="item">{{item}}</p>
    <button @click="onAdd(5)">增加</button>
    <button @click="onClick">增加</button>

    <ul>
      <!-- 先运行（返回函数）再传值 -->
      <li v-for="todo in filterTodos(true)" :key="todo.title">{{todo.title}}</li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
// 方法2
import store from "@/store";

import {mapState,mapMutations,mapGetters} from "vuex";
import {INCREMENT,CHANGE} from "@/store/types";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  computed:{//实际开发中，我们通常以计算属性来使用vuex中的状态
    // num1(){
      // 这里的都是获取num值的方法
    //   // 方法1
    //   // return this.$store.state.num;
    //   // 方法2
    //   return store.state.num
    // },

    // ...mapState({
      // 方法1
    //   // num: state => state.num
    // 方法2
    //   num: "num"
    // })

      // 这个num相当于上面的这个写法num: state => state.num
      // 方法3
    ...mapState(["num","arr"]),

    // 这个名字可以变，只要跟上面组件页面的渲染保持一致就可以了
    // 这里的doneTodos不打(),是因为computed中它是一个属性，不是一个方法
    // getters.doneTodos这个对应的是那边的vuex=>index.js,getters:{doneTodos(){...}}
    // doneTodo(){
    //   return this.$store.getters.doneTodos
    // }

    // ...mapGetters(["doneTodos"])
    // mapGetters的这种用法等同于上面的doneTodos的完整写法
    ...mapGetters(["filterTodos"])

    // a(){return mapState(["num"])} 
    

  },
  methods:{
    ...mapMutations([INCREMENT]),
    ...mapMutations({
      onAdd: INCREMENT,
    }),
    onClick(){
      // commit方法相当于vue实例中的$enit方法
      // 这里的这个值是我先点击了，于是我发射了这个事件，和第二个值，
      // 然后给了index.js里面的motutaions,然后我的motutations里面的
      // increment这个方法就会执行，然后我的state就会加10,然后就给到了
      // index.js中的state里面的num,然后我的我的compted就可以获取这个num
      // 然后我就可以在组件中{{num}},这样我就可以实时拿取到数据
      // this.$store.commit(INCREMENT,9);
      // this.$store.commit(CHANGE,{index:2,value:100})
      // this[INCREMENT](10)

    // action中事件的提交 是通过 $store.dispatch方法进行的提交


    // {amount: 30}这里写对象，只有写对象我才有一个名字，一个值
    // 首先我点击按钮，然后我的INCREMENT把事件发到vuex的index.js中的
    // action中的这里[types.INCREMENT]({commit},payload){...}，
    // 然后我一秒中触发了事件
    // setTimeout(() => {
    //     commit(types.INCREMENT,payload.amount)
    //   }, 1000)
    // 然后把types.INCREMENT发射给了mutation,然后mutation里面就改了
    // 点的那一瞬间就开一个定时器，然后点两下之后过1秒两个就差不多一起出来
      this.$store.dispatch(INCREMENT,{amount: 30})
    }
  },
  created(){
    // vuex中的状态也是响应式的
  //  console.log(this.$store.state.num);
    console.log(mapState({
      count: state => state.num
    }))

  // mapState的返回值就是对象
  // var b = mapState(["num","num2"])
  // console.log(b);
  // console.log(b.num);
  // //  console.log(b.num())
  // console.log(b.num.call(this));
  //  console.log(this.$store.state)

  // console.log(this.$store)

  // 这里doneTodos不用打括号，虽然他是一个方法，但是他的表现形式是属性
   console.log( this.$store.getters.doneTodos)
  }
};
</script>
